<template>
    <section class="header-bar _display_flex">
        <div class="header-l _display_flex">
            <div @click="setAsideSwitch"><icon class-name='iconqiehuanlie' size="24px" class="header-icon"></icon></div>
            <icon class-name="iconshouye" class="header-icon" size='24px' @click.native="getHome"></icon>
        </div>
            <div class="header-r _display_flex">
                <div class="header-r-inform">
                    <icon class-name='iconnotice' size="24px" class="header-icon"></icon>
                    <div class="header-r-info">5</div>
                </div>
                <icon class-name='icontuichu5' class="header-r-icon header-icon" size="24px"></icon>
            </div>
    </section>
</template>

<script>
import AsideList from "@/utlis/asideList.js"
import { mapState } from 'vuex'
export default {
    name: 'Header',
    title: '头部',
    computed: {
        ...mapState(['asideCollapse', 'asideItem'])
    },
    methods: {
        // 切换侧栏
        setAsideSwitch() {
            let asideCollapse = !this.asideCollapse
            this.$store.commit('getAsideCollapse', asideCollapse)
        },
        // 跳转首页
        getHome() {
            let asideItem = this.asideItem
            // 判断是否已存在，不存在就添加首页导航
            let existArr = this.asideItem.filter(v => v.index == '1')
            if(!existArr.length){
                asideItem.unshift(AsideList[0])
            }
            this.$store.commit('getAsideItem', asideItem)
            this.$store.commit('getActiveIndex', '1')
            this.$router.push({
                path: '/'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .header-bar{
        width: 100%;
        height: 100%;
        justify-content: space-between;
        .header-l{
            .header-l-bread{
                margin-left: 20px;
            }
        }
        .header-r{
            .header-r-icon{
                margin-left: 30px;
            }
            .header-r-inform{
                position: relative;
                .header-r-info{
                    position: absolute;
                    right: 0px;
                    top: -5px;

                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-size: $font-size-xs;
                    border-radius: 50%;

                    color: $text-color;
                    background: $bg-color-blue;
                }
            }
        }
        .header-icon{
            cursor: pointer;
        }
    }
</style>